<template>
  <div :class="classes || ''" class="bg-white-6 column no-wrap shadow-1 border-8 q-pa-md">
    <div class="row items-center">
      <div class="text-subtitle1 text-bold">{{ $t('Misc.TotalRunningDuration') }}</div>
      <q-space></q-space>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <div class="col row no-wrap run-chart-pie">
      <div class="q-mx-auto cursor-hover-image" @click.stop="emits('click', 'H')">
        <RunChartPie v-if="chartWidth"></RunChartPie>
      </div>
    </div>
    <div class="text-center text-bold q-pt-xs">{{ `${value || 0} H` }}</div>
  </div>
</template>
<script setup>
import RunChartPie from 'pages/Dashboard/Console/RunChartPie.vue'
import { onMounted, ref } from 'vue'

defineProps({ classes: String, value: [String, Number] })
const emits = defineEmits(['click'])

const chartWidth = ref(0)
onMounted(() => {
  const node = document.querySelector('.run-chart-pie')
  chartWidth.value = node.clientHeight
})
</script>
<style lang="scss" scoped>
.run-chart-pie {
  min-height: 5rem;
  max-height: 8rem;

  > div {
    width: v-bind('`${chartWidth}px`');
  }
}
</style>